<template>
  <div>
    <div class="functionalTypeBox">
      <div class="functionalTypeE" ref="showEcharts"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'staReward',
  data() {
    return {
      myChart: null,
      showAdvanceSearchVisible: false,//高级搜索特效
      studentName: '',//查询单个学生姓名
      studentInfos: [],
      name: [],
      data:[],
      total: 0,
    }
  },
  mounted() {
    this.initStuInfos();
  },
  methods: {
    initStuInfos() {//初始化学生数据
      this.loading = true;
      let url = '/student/reward/';
      this.getRequest(url).then(resp => {
        this.loading = false;
        if (resp) {
          console.log(resp)
          this.total = resp.total;
          this.data = resp.data;

          if (this.name && this.data) {//数据存在则初始化图表
            this.showEcharts();
          } else {
            console.log("错误错误！");
          }
        }
      })
    },
    showEcharts() {
      let option = {
        color: ['#ECC404', '#5096E6', '#59DE5D', '#C45645', '#9D5B9F', '#398065', 'rgba(250,250,250,0.3)','#FF8C00','#ECC404'],
        title: {
          subtext: this.total + '人',
          text: '学生获奖情况分析',
          textStyle: {
            color: 'black',
            fontSize: 30
          },
          subtextStyle: {
            color: '#9DC0FE',
            fontSize: 20,
            align:'center'
          },
          x: 'center',
          y: 'top'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          orient: 'vertical',
          x:'left',      //可设定图例在左、右、居中
          y:'center',     //可设定图例在上、下、居中
        },
        series: [
          {
            center: ['30%', '50%'],
            name: this.name,
            type: 'pie',
            radius: '80%',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'left'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 2, name: '获奖类别:校级'},
              {value: 2, name: '获奖类别:国家级'},
              {value: 4, name: '获奖类别:市级'},
              {value: 2, name: '获奖类别:省级'},
            ]
          },
          {
            name: this.name,
            type: 'pie',
            center: ['75%', '50%'],
            radius: '80%',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'left'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 3, name: '获奖信息:一等奖'},
              {value: 5, name: '获奖信息:二等奖'},
              {value: 1, name: '获奖信息:三等奖'},
            ]
          },
        ]


      };
      if (this.myChart) {
        this.myChart.clear();
      } else {
        this.myChart = this.$echarts.init(this.$refs.showEcharts);
      }
      this.myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.functionalTypeBox {
  height: 500px;
  margin-top: 35px;
}

.functionalTypeE {
  height: 430px;
}
</style>